<template>
	<view v-if="character">
		<view class="tankuang" v-if="direction == 'bottom'" :class="istopHeight?'popUp':'CpopUp'" @tap="close"></view>
		<view class="tankuang" v-if="direction == 'content'" @tap="close"></view>
		<view v-if="direction == 'bottom'" class="label" :class="istopHeight?'doalo':'doalo1'">
			<slot></slot>
		</view>
		<view v-if="direction == 'content'" class="label1">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				istopHeight:false
			}
		},
		props:{
			character:false,
			slide:false,
			direction:{
				type:String,
				default:'bottom'
			}
		},
		watch:{
			character (val) {
				if(val) {
					setTimeout(() =>{
						this.istopHeight = true
						this.$emit('wSlide',false)
					},80) 
				}
			},
			slide(val) {
				if(val) {
					this.istopHeight = false
				}
			}
		},
		onLoad() {
			
		},
		methods: {
			// 性格关闭
			close(){
				this.istopHeight = false
				if(this.direction == 'bottom') {
					setTimeout(() =>{
						this.$emit('wClose',false)
					},400)
				}else {
					this.$emit('wClose',false)
				}
			},
		}
	}
</script>

<style lang="scss">
	.tankuang{
		position:fixed;
		width:100%; 
		height:100%; 
		left:0; 
		bottom:0; 
		z-index:100;
		transform: .5s;
		opacity: 1;
		background:rgba(0, 0, 0, 0.5);
	}
	.label{
		width:100%; 
		height:auto; 
		background:#FFFFFF; 
		position:fixed; 
		bottom:0; 
		left:0;
		z-index: 101;
		transition: .3s;
		transform: translateY(700px)
	}
	.label1{
		height:auto; 
		position:fixed; 
		top:50%; 
		left:50%;
		transform: translate(-50%,-50%);
		z-index: 101;
		transition: .5s;
	}
	.doalo{
		transform: translateY(0);
	}
	.doalo1{
		transition: .7s;
		transform: translateY(700px)
	}
	.popUp{
		opacity: 1;
	}
	.CpopUp{
		opacity: 0;
	}
</style>
